<template>
  <el-form :model="searchForm" :rules="rules" ref="searchFormRef" :size="formSize" inline v-bind="$attrs">
    <slot></slot>
    <slot name="footer">
      <el-form-item style="margin-right: 0">
        <el-button type="primary" icon="el-icon-search" :size="buttonSize" @click="$emit('search')">搜索</el-button>
        <el-button icon="el-icon-refresh" :size="buttonSize"  @click="reset">重置</el-button>
      </el-form-item>
    </slot>
  </el-form>
</template>

<script>
  export default {
    name: 'ListSearch',
    props: {
      value: {
        type: Object,
        default: () => {}
      },
      rules: {
        type: Object,
        default: () => {}
      },
      resetRefresh: {
        //重置时是否刷新列表
        type: Boolean,
        default: true
      },
      formSize: {
        type: String,
        default: 'small'
      },
      buttonSize: {
        type: String,
        default: ''
      }
    },
    computed: {
      searchForm: {
        get() {
          return this.value
        },
        set(val) {
          this.$emit('input', val)
        }
      }
    },
    methods: {
      reset() {
        this.$refs['searchFormRef'].resetFields()
        this.$emit('reset')
        if (this.resetRefresh) this.$emit('search')
      }
    }
  }
</script>
